import React, {useContext} from 'react';
import {LikeOutlined, LikeTwoTone} from "@ant-design/icons";
import classes from './index.module.scss'
import {Tooltip} from "antd";
import LoginAlert from "../../LoginAlert";
import {likeIdsContext} from "../../../store/frontDesk/likeIds-context";

const LikeButton = (props) => {
    const {article_id} = props
    const ctx = useContext(likeIdsContext)
    const {like, cancelLike, open,likedMap} = ctx

    return (
        <div className={classes.Like}>
            <>
                {likedMap[article_id] ? (
                    <div onClick={() => cancelLike(props.article_id)}>
                        <Tooltip title="取消点赞">
                            <span className={classes.goodNumber}>{props.praise}</span>
                            <LikeTwoTone />
                        </Tooltip>
                    </div>

                ) : (
                    <div onClick={() => like(props.article_id)}>
                        <Tooltip title="点赞">
                            <span className={classes.goodNumber}>{props.praise}</span>
                            <LikeOutlined key="good"/>
                        </Tooltip>
                        {open && <LoginAlert open={open}/>}
                    </div>
                )}
            </>
        </div>
    );
};

export default LikeButton;